<template>
    <div class="clearfix">
        <section class="content-header">
            排班管理&nbsp;/&nbsp;值班岗位管理&nbsp;/&nbsp;查看值班岗位
        </section>

        <div class="col-md-12" style="margin-top:50px;">
            <form class="form-horizontal">
                <div class="clearfix">
                    <div class="col-md-4">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">岗位名称：</label>
                                <div class="col-sm-8">
                                    <p class="msgP">{{planData.plan.jobName}}</p>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">单位：</label>
                                <div class="col-sm-8">
                                    <p class="msgP">{{getItemName(planData.plan.companyId, this.zhibanList.unitList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">部门：</label>
                                <div class="col-sm-8">
                                    <p class="msgP">{{getItemName(planData.plan.deptId, this.zhibanList.deptList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">负责人：</label>
                                <div class="col-sm-8">
                                    <p class="msgP">{{getItemName(planData.plan.leaderId, this.zhibanList.personsList, 'value', 'name')}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">联系电话：</label>
                                <div class="col-sm-8">
                                    <p class="msgP">{{planData.plan.phonenum}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-md-offset-2">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <p class="clearfix msgPP">{{planData.plan.remark}}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">岗位人员：</label>
                                <div class="col-sm-8 person">
                                    <p class="clearfix spanP" style="">
                                        <span style="display:inline-block;width:60px" v-for="item in planData.list" :key="item.index">{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-md-8">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">值班时间：</label>
                                <div class="col-sm-10">
                                    <table id="example" class="addgangwei" style="font-size:14px">
                                        <tr v-for="item in planData.time" :key="item.value">
                                            <td class="weekcheck">星期
                                                <input type="checkbox" disabled v-model="item.schedualCycle.one">一
                                                <input type="checkbox" disabled v-model="item.schedualCycle.two">二
                                                <input type="checkbox" disabled v-model="item.schedualCycle.three">三
                                                <input type="checkbox" disabled v-model="item.schedualCycle.four">四
                                                <input type="checkbox" disabled v-model="item.schedualCycle.five">五
                                                <input type="checkbox" disabled v-model="item.schedualCycle.six">六
                                                <input type="checkbox" disabled v-model="item.schedualCycle.seven">日
                                            </td>
                                            <td>
                                                <div class="timeselect">时段</div>
                                                <div class="timeselect"><input type="text" disabled="disabled" v-model="item.time1" class="form-control pull-left" id="datepicker1">
                                                    <div class="icon" style="background:#eee">
                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                                <div class="timeselect">--</div>
                                                <div class="timeselect"><input type="text" disabled="disabled" v-model="item.time2" class="form-control pull-left" id="datepicker1">
                                                    <div class="icon" style="background:#eee">
                                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-4"></div>
                    <div class="col-md-2" style="text-align: center">
                        <router-link to="station">
                            <button type="button" class="btn btn-info" style="margin-right:50px">返回</button>
                        </router-link>
                    </div>
                    <div class="col-md-6"></div>
                </div>

            </form>
        </div>

    </div>
</template>

<script>
import { getItemName } from "@/filters/index.js";

export default {
    data() {
        return {
            planData: {
                plan: {},
                time: [{ schedualCycle: {} }]
            },
            zhibanList: {
                deptList: [],
                unitList: [],
                plansList: [],
                personsList: [],
            },
            selectData: [{
                mon: false,
                tue: false,
                wed: false,
                thu: false,
                fri: false,
                sat: false,
                sun: false,
                start: '',
                end: ''
            }],
            options: [
                { "id": 1, "name": "Vence" },
                { "id": 2, "name": "Job" },
                { "id": 3, "name": "Jack" },
            ],
            students: [],
        };
    },
    mounted() {
        this.getPlanId(() => {
            this.getUnit()
            this.getDept()
            this.getPersons()
        })

        // this.getPlans()
        // this.getPersons()
    },
    methods: {
        getItemName,
        additem() {
            let addData = {
                mon: false,
                tue: false,
                wed: false,
                thu: false,
                fri: false,
                sat: false,
                sun: false,
                start: '',
                end: ''
            };
            this.selectData.push(addData);
        },
        getPlanId(callback) {
            this.$api.paiban.planId({
                timeId: this.$route.query.timeId,
                palnId: this.$route.query.palnId
            }).then(res => {
                if (res.success) {
                    this.planData = res.data
                    // console.log(this.planData);
                    callback()
                }
            });
        },
        //单位
        getUnit() {
            this.$api.paiban.unit().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.zhibanList.unitList = res.data
                }
            });
        },
        //部门
        getDept() {
            this.$api.paiban.dept({
                parentId: this.planData.plan.companyId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.zhibanList.deptList = res.data
                }
            });
        },

        // //岗位
        // getPlans() {
        //     this.$api.paiban.plans({
        //         companyId: this.planData.plan.companyId,
        //         deptId: this.planData.plan.deptId
        //     }).then(res => {
        //         if (res.success) {
        //             // console.log(res);
        //             this.zhibanList.plansList = res.data
        //         }
        //     });
        // },
        //责任人
        getPersons() {
            this.$api.paiban.persons({
                deptId: this.planData.plan.deptId
            }).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.zhibanList.personsList = res.data
                }
            });
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.addgangwei {
  background: #fff;
  td {
    padding: 5px 20px;
    border: 1px solid #d2d6de;
  }
  .weekcheck {
    input {
      margin-left: 20px;
      vertical-align: middle;
      margin-top: -2px;
    }
  }
  .timeselect {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    margin: 0 10px;
    float: left;
    .form-control {
      width: 60px;
      display: inline-block;
      border-right: 0;
      margin-right: -2px;
    }
    .icon {
      float: left;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      color: #555;
      background-image: none;
      border: 1px solid #ccc;
      border-left: 0;
      padding-right: 10px;
      border-radius: 0px 4px 4px 0px;
    }
  }
}
.msgP {
  line-height: 34px;
  height: 34px;
  padding-left: 20px;
  margin: 0px;
  background: #fff;
  border: 1px solid #d2d6de;
}
.msgPP {
  padding-left: 20px;
  padding-right: 20px;
  margin: 0px;
  background: #fff;
  border: 1px solid #d2d6de;
  line-height: 34px;
  height: 34px;
}
.spanP {
  padding-left: 18px;
  margin: 0px;
  background: #fff;
  border: 1px solid #d2d6de;
}
.person {
  span {
    line-height: 34px;
  }
}
</style>
